<template>
  <section class="wrapper">
    <header class="header">
      <router-link to="/">
        <span class="close">返回</span>
      </router-link>
      <span class="title">登入</span>
    </header>
    <div class="logo">
      <img class="logo_img"
           src="@\assets\picture\logo.jpg"
           alt="">
    </div>
    <input type="text"
           placeholder="用户名|邮箱|手机号"
           class="user"
           v-model="data.username">
    <input type="password"
           placeholder="请输入密码"
           class="password"
           v-model="data.password">
    <button class="login"
            @click="handlelogin">登入</button>
    <transition name="fade">
      <Toast v-if="data.islogintrue"></Toast>
    </transition>
    <div class="tag"><input type="radio">已经阅读并同意相关条例</div>
    <div class="other">
      <p>其他登入方式</p>
      <span>短信验证</span>
      <span>京东登入</span>
      <span>微信登入</span>
      <div class="last_tag">未注册过的手机将自动保存为京东账号</div>
    </div>
  </section>
</template>

<script>
// 引入路由
import { useRouter } from 'vue-router'
// import axios from 'axios'
import { reactive } from 'vue'
import Toast from '../../components/Toast.vue'
import { post } from '../../utils/request'
// 修改axios的post请求的默认数据类型,所以会影响到所有的axios请求，这不好
// axios.defaults.headers.post['Context-Type'] = 'application/json'
export default {
  setup () {

    // 获得路由实例
    const router = useRouter();
    const data = reactive({
      username: '',
      password: '',
      islogintrue: false
    })
    const handlelogin = async () => {
      const result = await post('/api/login', {
        username: data.username,
        password: data.password
      })
      console.log(result)
      if (result.data.userInfo) {
        alert('登入成功')
        localStorage.islogin = true;
        // 路由跳转
        router.push({ name: 'Home' })
      } else {
        data.islogintrue = true;
        setTimeout(() => {
          data.islogintrue = false;
        }, 3000)
      }
      // axios.post('https://www.fastmock.site/mock/6336880122f3071e793b936974a3ffad/api/login', {
      //   
      // })
      // .then((result) => {
      //   if (res.data.userInfo) {
      //     alert('登入成功')
      //     localStorage.islogin = true;
      //     // 路由跳转
      //     router.push({ name: 'Home' })
      //   } else {
      //     data.islogintrue = true;
      //     setTimeout(() => {
      //       data.islogintrue = false;
      //     }, 3000)
      //   }
      // })
    }
    return { handlelogin, data }
  },
  components: {
    Toast
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0.18rem;
  .header {
    position: relative;
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    .close {
      position: absolute;
      top: 0;
      left: 0.05rem;
    }
    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .logo {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0.5rem 0 0.3rem 0;
    .logo_img {
      width: 100%;
    }
  }
  .user {
    width: 60%;
    height: 00.3rem;
    line-height: 0.3rem;
  }
  .password {
    width: 60%;
    height: 00.3rem;
    line-height: 0.3rem;
  }
  .login {
    width: 60%;
    height: 00.3rem;
    line-height: 0.3rem;
    border-radius: 00.5rem;
    margin-top: 0.2rem;
  }
  .tag {
    width: 60%;
    margin-top: 0.15rem;
  }
  .other {
    text-align: center;
    position: absolute;
    bottom: 0.7rem;
    .last_tag {
      font-size: 0.12rem;
    }
  }
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease-out;
}
</style>

// , {
//         username: 'data.username',
//         password: 'data.password'